import React from 'react';
import { Switch, Button, Radio, Modal } from 'antd';
import style from '@/pages/IndexPage.css';
import CustomSwitch from '@/components/CustomSwitch';
import CustomTimeline from './CustomTimeline';
import HorizonBarChart from './HorizonBarChart';
import CustomGaugeChart from './CustomGaugeChart';
import LineChart from './LineChart';
import Img from '../../../../../public/canvas-board/waterPump.png';


function FrozenMachBoard(){
    return (
        <div style={{ height:'100%', whiteSpace:'nowrap' }}>
            {/* 冷冻阀控制和设备日志 */}
            <div style={{ height:'24%' }}>
                <div className={style['card-container-wrapper']} style={{ width:'28%' }}>
                    <div className={style['card-container']}>
                        <div className={style['card-title']} style={{ justifyContent:'flex-start' }}>
                            <span>冷冻阀控制</span>
                            <span style={{ margin:'0 1rem' }} className={style['custom-tag'] + ' ' + style['success']}><span className={style['dot']}></span>运行中</span>
                        </div>
                        <div className={style['card-content']} style={{ textAlign:'center' }}>
                            <img src={Img} style={{ height:'70%' }} />
                            <div style={{ marginTop:'1rem', display:'flex', justifyContent:'space-around' }}>
                                <CustomSwitch options={['本地', '远程']} defaultChecked={1} />
                                <CustomSwitch options={['关闭', '开启']} defaultChecked={1} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className={style['card-container-wrapper']} style={{ width:'28%' }}>
                    <div className={style['card-container']}>
                        <div className={style['card-title']} style={{ justifyContent:'flex-start' }}>
                            <span>冷冻阀控制</span>
                            <span style={{ margin:'0 1rem' }} className={style['custom-tag'] + ' ' + style['success']}><span className={style['dot']}></span>运行中</span>
                        </div>
                        <div className={style['card-content']} style={{ textAlign:'center' }}>
                            <img src={Img} style={{ height:'70%' }} />
                            <div style={{ marginTop:'1rem', display:'flex', justifyContent:'space-around' }}>
                                <CustomSwitch options={['本地', '远程']} defaultChecked={1} />
                                <CustomSwitch options={['关闭', '开启']} defaultChecked={1} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className={style['card-container-wrapper']} style={{ width:'44%', paddingRight:'0' }}>
                    <div className={style['card-container']} style={{ overflow:'hidden' }}>
                        <div className={style['card-title']}>设备日志</div>
                        <div className={style['card-content']} style={{ overflow:'hidden auto' }}>
                            <CustomTimeline />
                        </div>
                    </div>
                </div>
            </div>
            {/* 负载率和COP */}
            <div style={{ height:'36%' }}>
                <div className={style['card-container-wrapper']} style={{ width:'50%' }}>
                    <div className={style['card-container']}>
                        <CustomGaugeChart min={0} max={100} title='负载率' data={45.3} legend={[{ label:'今日平均负载', value:43.3, unit:'%' }, { label:'主机平均负载', value:31.3, unit:'%' }]} />
                    </div>
                </div>
                <div className={style['card-container-wrapper']} style={{ width:'50%', paddingRight:'0' }}>
                    <div className={style['card-container']}>
                        <CustomGaugeChart min={0} max={10} title='COP' data={4.1} forCOP={true} legend={[{ label:'冷战COP', value:6.2, unit:'' }, { label:'主机综合COP', value:4.1, unit:'' }]} />
                    </div>
                </div>
            </div>
            {/* 运行状态趋势图 */}
            <div style={{ height:'12%' }}>
                <div className={style['card-container-wrapper']} style={{ width:'100%', paddingRight:'0' }}>
                    <div className={style['card-container']}>
                        <HorizonBarChart />
                    </div>
                </div>
            </div>
            {/* 制冷量趋势图 */}
            <div style={{ height:'28%' }}>
                <div className={style['card-container-wrapper']} style={{ width:'100%', paddingRight:'0', paddingBottom:'0' }}>
                    <div className={style['card-container']}>
                        <LineChart title='制冷量' />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default FrozenMachBoard;